<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>环形图</title>
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../../css/oksub.css">
</head>
<body>
<div class="layui-row">
    <form class="layui-form" style="margin-top:15px;margin-bottom: 25px" action="">
        <div class="layui-inline">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-block">
                <select name="dateType" id="dateType" lay-verify="dateType">
                    <option value='1'>最近一个月</option>
                    <option value='2'>最近三个月</option>
                    <option value='3'>最近半年</option>
                    <option value='4'>最近一年</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-inline" style="margin-right: 8px">
                <button class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search" style="font-size: 14px">搜索</i>
                </button>
            </div>
            <div id="selectMore" style="margin-left:0px;"
                 class="layui-btn layui-btn-normal">
                更多
            </div>
        </div>
    </form>
</div>

<div id="main" style="width: 100%;height:400px;margin-top: 50px;"></div>

<script src="../../../lib/echarts/echarts.min.js"></script>
<script src="../../../lib/layui/layui.js"></script>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/application.js"></script>
<script src="../../../js/selectMore.js"></script>
<script type="text/javascript">
    layui.use(['layedit', 'upload', 'element', 'form', 'okLayer'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let okLayer = layui.okLayer;

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //获取案件数量信息
        $.ajax({
            url: mainUri + "/caseCount/getCaseCountEnd",
            type: 'post',
            data: {
                'dateType': 1,
                'departmentId': police.departmentId
            },
            success: function (datas) {
                var list = datas['data'];
                var data=[{"value":list[0]['caseNoEndCount'],"name":"未办结警情"},{"value":list[0]['caseEndCount'],"name":"已办结警情"}]
                chart(data)
            },
            error: function () {
                alert("服务器错误");
            }
        })

        //点击搜索按钮
        $("#search").on('click', search);

        function search() {
            var dateType = $("#dateType").val();
            $.ajax({
                url: mainUri + "/caseCount/getCaseCountEnd",
                type: 'post',
                data: {
                    'dateType': dateType,
                    'departmentId': police.departmentId
                },
                success: function (datas) {
                    var list = datas['data'];
                    var data=[{"value":list[0]['caseNoEndCount'],"name":"未办结警情"},{"value":list[0]['caseEndCount'],"name":"已办结警情"}]
                    chart(data)
                },
                error: function () {
                    alert("服务器错误");
                }
            })
            return false;
        }

        //使用时间条件查询
        $("#selectMore").on('click', selectMore);

        function selectMore() {
            okLayer.open("查询条件", "selectForm.html", "35%", "60%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {
                var startTime = window.document.startTime;
                var endTime = window.document.endTime;
                var newStartDate = startTime.replace(/-/g, "/");//时间格式转换
                var newEndDate = endTime.replace(/-/g, "/");
                window.document.startTime = "";
                window.document.endTime = "";
                var isChange = window.document.isChange;
                window.document.isChange = 0
                if (isChange != 1) {
                    return
                }
                $.ajax({
                    url: mainUri + "/caseCount/getCaseCountEnd",
                    type: 'post',
                    data: {
                        'startTime': newStartDate,
                        'endTime': newEndDate,
                        'departmentId': police.departmentId
                    },
                    success: function (datas) {
                        var list = datas['data'];
                        var data=[{"value":list[0]['caseNoEndCount'],"name":"未办结警情"},{"value":list[0]['caseEndCount'],"name":"已办结警情"}]
                        chart(data)
                    },
                    error: function () {
                        alert("服务器错误");
                    }
                })
                return false;
            })
        }

        //渲染图
        function chart(data) {
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['已办结警情','未办结警情']
                },
                series: [
                    {
                        name: '警情数据',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:data
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })
</script>
</body>
</html>
